<template>
    <trends-form
        v-if="formData"
        :form-data="formSettingData"
        :form-controls="formControls"
        :form-settings-data="formData"
    />
</template>

<script>
import {mapState} from "vuex";

export default {
    name: "FormSettings",
    data() {
        return {
            formData: null,
            formControls: [{
                "widthPx": 36,
                "prev": false,
                "type": "Switch",
                "disabled": false,
                "label": "禁用",
                "activeValue": true,
                "inactiveValue": false,
                "name": "disabled",
                "width": "46%",
                "id": 1632153867330,
                "selected": false,
                "inBoxMove": false
            }, {
                "prev": false,
                "border": false,
                "type": "Radio",
                "label": "表单尺寸",
                "name": "size",
                "disabled": false,
                "options": [{"value": "medium", "label": "普通"}, {"value": "small", "label": "小"}, {
                    "label": "迷你",
                    "value": "mini"
                }],
                "width": "46%",
                "radioType": 'default',
                "id": 1632153726186,
                "selected": false,
                "inBoxMove": false
            }, {
                "widthPx": 36,
                "prev": false,
                "type": "Switch",
                "disabled": false,
                "label": "行内表单",
                "activeValue": true,
                "inactiveValue": false,
                "name": "inline",
                "width": "46%",
                "id": 1632153413187,
                "selected": false,
                "inBoxMove": false
            }, {
                "prev": false,
                "border": false,
                "type": "Radio",
                "label": "标签位置",
                "name": "labelPosition",
                "disabled": false,
                "options": [{"value": "left", "label": "左"}, {"value": "right", "label": "右"}, {
                    "label": "顶部",
                    "value": "top"
                }],
                "width": "46%",
                "id": 1632153445298,
                "radioType": 'default',
                "selected": true,
                "inBoxMove": false
            }, {
                "step": 10,
                "prev": false,
                "precision": 0,
                "minlength": 50,
                "border": false,
                "maxlength": 500,
                "controls": true,
                "label": "标签宽度(px)",
                "disabled": false,
                "type": "InputNumber",
                "name": "labelWidth",
                "width": "46%",
                "id": 1632153495890,
                "selected": false,
                "inBoxMove": false
            }, {
                "widthPx": 36,
                "prev": false,
                "type": "Switch",
                "disabled": false,
                "label": "左侧必填星号",
                "activeValue": true,
                "inactiveValue": false,
                "name": "hideRequiredAsterisk",
                "width": "46%",
                "id": 1632153562829,
                "selected": false,
                "inBoxMove": false
            }, {
                "widthPx": 36,
                "prev": false,
                "type": "Switch",
                "disabled": false,
                "label": "校验错误信息",
                "activeValue": true,
                "inactiveValue": false,
                "name": "showMessage",
                "width": "46%",
                "id": 1632153614220,
                "selected": false,
                "inBoxMove": false
            }, {
                "widthPx": 36,
                "prev": false,
                "type": "Switch",
                "disabled": false,
                "label": "错误信息行内显示",
                "activeValue": true,
                "inactiveValue": false,
                "name": "inlineMessage",
                "width": "46%",
                "id": 1632153663513,
                "selected": false,
                "inBoxMove": false
            }]
        }
    },
    computed: {
        ...mapState({
            // 表单设置
            formSettingData: state => state.formSettingData,
        })
    },
    mounted() {
        this.formData = JSON.parse(JSON.stringify(this.formSettingData));
    }
}
</script>

<style scoped>
    ::v-deep(.el-radio) {
        margin-right: 10px;
    }
</style>
